<template>
  <div class="app-content">
    <dk-table ref="DkTableRef" :hide-buttons="['recycle']" table-api="/gs_gold/admin.fund_sharing" :cache-table="!getDev()">
      <template #RecycleButtonAppend>
        <el-button type="warning" class="m-l-1" @click="onCheck()">同步收益</el-button>
      </template>
      <template #is_share_slot="{ row }">
        <el-tag v-if="row.is_share" type="danger">是</el-tag>
        <el-tag v-else>否</el-tag>
      </template>
      <template #ad_count_slot="{ row }">
        <el-tag v-if="row.ad_count > 0" type="danger">{{ row.ad_count }}</el-tag>
        <el-tag v-else>{{ row.ad_count }}</el-tag>
      </template>
      <template #income_slot="{ row }">
        <span :class="{ 'text-red font-bold': row.income > 0 }">{{ row.income }}</span>
      </template>
      <template #share_money_slot="{ row }">
        <el-tag v-if="row.is_share" type="danger">{{ row.share_money }}</el-tag>
        <el-tag v-else>未分佣</el-tag>
      </template>
    </dk-table>
  </div>
  <dk-dialog v-model="showUpdateIncome" title="导入收益" width="600">
    <el-form :model="form" label-width="100px" label-position="left">
      <el-form-item label="更新日期">
        <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <!--      <el-form-item label="过滤零收入">-->
      <!--        <el-switch v-model="form.exclude" />-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onClickUpdateIncome()">确定</el-button>
      </el-form-item>
    </el-form>
  </dk-dialog>

  <dk-dialog v-model="showShare" title="广告收益分佣" width="800">
    <el-alert
      type="error"
      title="说明"
      description="默认为当日广告总收益计算出广告展现单价，然后分佣给不同用户，同时可以重新输入分佣的总金额用于缩减支出或者补贴用户"
    ></el-alert>
    <el-descriptions :column="2" border class="py5">
      <el-descriptions-item label="累积收益">
        <span class="font-bold color-red">{{ shareData?.fundShare?.income }} 元</span>
      </el-descriptions-item>
      <el-descriptions-item label="统计日期">{{ shareData?.fundShare?.date }}</el-descriptions-item>
      <el-descriptions-item label="广告展现总次数">{{ shareData.ad_count }} 次</el-descriptions-item>
      <el-descriptions-item label="分佣人数">
        <div class="flex justify-between items-center">
          <span>{{ shareData.user_count }} 人 </span>
          <el-button size="small" @click="showShareUser = true">查看</el-button>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="广告单价">{{ shareData?.unit_price }} 元</el-descriptions-item>
      <el-descriptions-item label="整体盈亏">
        <span v-if="shareData?.wax_wane > 0" class="color-green"> +{{ shareData?.wax_wane }} 元</span>
        <span v-else class="color-red"> {{ shareData?.wax_wane }} 元</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-form :model="form" label-width="100px" label-position="left" class="pt3">
      <el-row>
        <el-col :span="12">
          <el-form-item label="分佣金额">
            <el-input-number v-model="shareForm.money" :min="0"> </el-input-number>
            <el-button
              class="m-l-1"
              :disabled="shareForm.money == shareData.fundShare?.income"
              type="primary"
              @click="getFundShareData(chooseItem.id, shareForm.money)"
            >
              重新计算
            </el-button>
            <p class="font-size-12px color-gray">设置自定义的分佣金额</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分佣单价">
            <el-input-number v-model="shareForm.unit_price" :min="0" />
            <p class="font-size-12px color-gray">当前单价通过计算获得，手动修改无效</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="shareForm.remark" :min="0" />
            <p class="font-size-12px color-gray">设置当前分佣备注信息</p>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="text-center">
        <el-button @click="getFundShareData(chooseItem.id, 0)">重置金额</el-button>
        <el-button type="primary" @click="fundShareSubmit()">确定分佣</el-button>
      </div>
    </el-form>
  </dk-dialog>
  <el-dialog v-model="showShareUser" title="用户分享广告数据" width="500">
    <el-table v-if="showShareUser" :data="shareData.user_list">
      <el-table-column property="id" label="UID" width="60" />
      <el-table-column property="avatar" label="头像">
        <template #default="{ row }">
          <img :src="row.avatar" alt="" class="size-50px" />
        </template>
      </el-table-column>
      <el-table-column property="username" label="昵称" width="200" />
      <el-table-column property="count" label="广告次数" width="100" />
    </el-table>
  </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getDev } from '@/utils/auth'
import { getFundShareDataById, handleFundShare, updateIncome } from '@/api/sharing'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: 'SharingList'
})
const DkTableRef = ref()
const showUpdateIncome = ref(false)
const showShare = ref(false)
const showShareUser = ref(false)
const chooseItem: any = ref({})
const getWeekStartDate = (day) => {
  const today = new Date()
  const weekAgo = new Date()
  weekAgo.setDate(today.getDate() - day)
  return weekAgo
}
const form = ref({
  date: [
    // 默认为近一周
    getWeekStartDate(7),
    getWeekStartDate(1)
  ],
  exclude: true
})

const shareForm = ref({
  money: 0,
  unit_price: 0,
  remark: ''
})

const onCheck = () => {
  showUpdateIncome.value = true
}

const onClickUpdateIncome = () => {
  updateIncome(form.value).then((res) => {
    showUpdateIncome.value = false
    DkTableRef.value.DkTable.getIndex()
  })
}
const shareData = ref({})

const getFundShareData = (id: number, money: number = 0) => {
  getFundShareDataById(id, money).then((res) => {
    shareData.value = res.data
    if (!money) {
      shareForm.value.money = res.data.fundShare?.income
    }
    shareForm.value.unit_price = res.data?.unit_price
  })
}

const fundShareSubmit = () => {
  ElMessageBox.confirm('确认当前金额进行分佣?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      handleFundShare(chooseItem.value.id, shareForm.value).then((res) => {
        showShare.value = false
        shareForm.value = {
          money: 0,
          unit_price: 0,
          remark: ''
        }
        DkTableRef.value.DkTable.getIndex()
      })
    })
    .catch(() => {})
}

onMounted(() => {
  DkTableRef.value.DkTable.onClickButton((event, data) => {
    if (event == 'share') {
      // if (data.row.is_share) {
      //   ElMessage.warning('当前已经分佣了')
      // } else {
      showShare.value = true
      chooseItem.value = data.row
      getFundShareData(data.row.id)
      // }
    }
  })
})
</script>
<style></style>
